<html xmlns:th="http://www.thymeleaf.org">
<div class="layui-card">
    <div class="layui-card-header">
        列表
        <button class="layui-btn layui-btn-xs" style="float: right;margin-top: 11px" id="add">
            <i class="layui-icon">&#xe654;</i>新增
        </button>
    </div>
    <div class="layui-card-body">
        <form class="layui-form" id="pageForm" >
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">角色名称</label>
                    <div class="layui-input-inline" style="width: 200px;">
                        <input type="text" name="name" autocomplete="off" class="layui-input"/>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit="" lay-filter="formDemo">搜索</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>

</div>

<table id="demo" lay-filter="test"></table>
<script th:inline="javascript">
    layui.use(['form','layer','jquery','table','element'],function(){
        var table = layui.table;
        var layer = layui.layer;
        var element = layui.element;
        var form = layui.form;
        var $ = layui.jquery;
        $('#add').click(function(){
            openwindows(/*[[${#httpServletRequest.getContextPath()+'/admin/role/info'}]]*/,null,$)
        });
        //执行渲染
        table.render({
            elem: '#demo', //指定原始表格元素选择器（推荐id选择器）
            id:"test",
            page:true,
            height: "full",//容器高度
            url:/*[[${#httpServletRequest.getContextPath()+'/admin/role/pageList'}]]*/,
            method:"post",
            where:$("#pageForm").serialize(),
            cols: [[
                {field: 'id', title: 'ID', width:80},
                {field: 'name', title: '名称'},
                {field: 'create_time', title: '创建时间',templet:"#dataFormat"},
                {title:"操作",toolbar:"#operation"}
            ]]
        });
        form.on('submit(formDemo)', function(data){
            table.render({
                elem: '#demo', //指定原始表格元素选择器（推荐id选择器）
                id:"test",
                page:true,
                height: "full",//容器高度
                url:/*[[${#httpServletRequest.getContextPath()+'/admin/role/pageList'}]]*/,
                method:"post",
                where:$("#pageForm").serializeJson(),
                cols: [[
                    {field: 'id', title: 'ID', width:80},
                    {field: 'name', title: '名称'},
                    {field: 'create_time', title: '创建时间',templet:"#dataFormat"},
                    {title:"操作",toolbar:"#operation"}
                ]]
            });
            return false;
        })
        table.on('tool(test)', function(obj){
            var data = obj.data;
            if(obj.event=="edit"){
                openwindows(/*[[${#httpServletRequest.getContextPath()+'/admin/role/info'}]]*/,{id:data.id},$)
            }else if(obj.event=="del"){
                layer.confirm('是否删除该数据？', {
                    btn: ['确定', '取消']
                }, function(index, layero){
                    ajaxUtil(/*[[${#httpServletRequest.getContextPath()+'/admin/role/'}]]*/,{id:data.id},function() {
                        layer.alert('操作成功', {icon: 2});
                    });
                    layer.close(index)
                }, function(index){
                    layer.close(index);
                });
            }
        })

    })
</script>

<script type="text/html" id="dataFormat">
    {{     new Date(d.create_time).Format("yyyy-MM-dd hh:mm:ss")  }}
</script>
<script type="text/html" id="operation">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
</html>